<form [formGroup]="formGroup()" class="form-group edit-form">
  <div class="row">
    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <label class="control-label" for="Targets">Targets</label>
      <keira-flags-selector-btn
        [control]="formGroup().controls.Targets"
        [disabled]="formGroup().controls.Targets.disabled"
        [config]="{ flags: SPELL_DBC_TARGETS, name: 'Targets' }"
      />
      <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.EFFECTS.TARGETS' | translate"></i>
      <input [formControlName]="'Targets'" id="Targets" type="number" class="form-control form-control-sm" />
    </div>

    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <label class="control-label" for="ProcTypeMask">ProcTypeMask</label>
      <keira-flags-selector-btn
        [control]="formGroup().controls.ProcTypeMask"
        [disabled]="formGroup().controls.ProcTypeMask.disabled"
        [config]="{ flags: SPELL_DBC_PROC_FLAGS, name: 'ProcTypeMask' }"
      />
      <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.EFFECTS.PROC_TYPE_MASK' | translate"></i>
      <input [formControlName]="'ProcTypeMask'" id="ProcTypeMask" type="number" class="form-control form-control-sm" />
    </div>

    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <label class="control-label" for="ProcChance">ProcChance</label>
      <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.EFFECTS.PROC_CHANCE' | translate"></i>
      <input [formControlName]="'ProcChance'" id="ProcChance" type="number" class="form-control form-control-sm" />
    </div>

    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <label class="control-label" for="ProcCharges">ProcCharges</label>
      <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SPELL_DBC.EFFECTS.PROC_CHARGES' | translate"></i>
      <input [formControlName]="'ProcCharges'" id="ProcCharges" type="number" class="form-control form-control-sm" />
    </div>
  </div>
</form>

<tabset>
  <tab heading="Spell Effects 1" id="spell-effects-1">
    <keira-spell-dbc-spell-effect [formGroup]="formGroup()" [index]="1" />
  </tab>
  <tab heading="Spell Effects 2" id="spell-effects-2">
    <keira-spell-dbc-spell-effect [formGroup]="formGroup()" [index]="2" />
  </tab>
  <tab heading="Spell Effects 3" id="spell-effects-3">
    <keira-spell-dbc-spell-effect [formGroup]="formGroup()" [index]="3" />
  </tab>
</tabset>
